<template>
  <div
    class="relative flex w-full"
    :class="[
      'mt-' + (info.extension.topMargin && info.extension.topMargin.value),
      'mr-' + (info.extension.rightMargin && info.extension.rightMargin.value),
      'mb-' + (info.extension.bottomMargin && info.extension.bottomMargin.value),
      'ml-' + (info.extension.leftMargin && info.extension.leftMargin.value),
      `items-${info.extension.itemsAlign.value}`,
      `justify-${info.extension.justifyAlign.value}`,
    ]"
    :style="{
      '--height': `${info.extension.boxHeight.value}px`,
      height: `${info.extension.boxHeight.value}px`,
      '--duration': `${info.extension.duration.value / 1000}s`,
    }"
  >
    <div
      v-if="info.extension.prefix.value"
      :style="{
        width: `${info.extension.cardWidth.value}px`,
        height: `${info.extension.cardheight.value}px`,
        backgroundColor: `${info.extension.backgroundColor.value}px`,
        marginRight: `${info.extension.letterSpacing.value}px`,
      }"
    >
      <div
        :class="['div2']"
        :style="{
          width: `${info.extension.cardWidth.value}px`,
          height: `${info.extension.cardheight.value}px`,
          backgroundColor: `${info.extension.backgroundColor.value}`,
          fontSize: `${info.extension.titleFontSize.value}px`,
          color: `${info.extension.titleColor.value}`,
          fontWeight: `${info.extension.titleFontWeight.value}`,
          borderRadius: `${info.extension.borderRadius.value}px`,
          border: `${info.extension.boderWeight?.value}px ${info.extension.boderType?.value} ${info.extension.boderColor?.value}`,
        }"
      >
        {{ info.extension.prefix.value }}
      </div>
    </div>
    <div
      v-for="(item, index) in num"
      :key="index"
      :style="{
        width: `${info.extension.cardWidth.value}px`,
        height: `${info.extension.cardheight.value}px`,
        borderRadius: `${info.extension.borderRadius.value}px`,
        marginRight: index < num.length - 1 || info.extension.suffix.value ? `${info.extension.letterSpacing.value}px` : '0px',
      }"
    >
      <div
        v-for="(c, i) in num1"
        :key="i"
        :class="['div2', item <= c ? '' : 'atcive']"
        :style="{
          transform: item <= c ? 'rotateX(0)' : 'rotateX(270deg)',
          opacity: item <= c ? 1 : 0,
          width: `${info.extension.cardWidth.value}px`,
          height: `${info.extension.cardheight.value}px`,
          backgroundColor: `${info.extension.backgroundColor.value}`,
          fontSize: `${info.extension.titleFontSize.value}px`,
          color: `${info.extension.titleColor.value}`,
          fontWeight: `${info.extension.titleFontWeight.value}`,
          borderRadius: `${info.extension.borderRadius.value}px`,
          border: `${info.extension.boderWeight?.value}px ${info.extension.boderType?.value} ${info.extension.boderColor?.value}`,
          display: item < c ? 'none' : '',
        }"
      >
        {{ c }}
      </div>
    </div>
    <div
      v-if="info.extension.suffix.value"
      :style="{
        width: `${info.extension.cardWidth.value}px`,
        height: `${info.extension.cardheight.value}px`,
        backgroundColor: `${info.extension.backgroundColor.value}px`,
      }"
    >
      <div
        :class="['div2']"
        :style="{
          width: `${info.extension.cardWidth.value}px`,
          height: `${info.extension.cardheight.value}px`,
          backgroundColor: `${info.extension.backgroundColor.value}`,
          fontSize: `${info.extension.titleFontSize.value}px`,
          color: `${info.extension.titleColor.value}`,
          fontWeight: `${info.extension.titleFontWeight.value}`,
          borderRadius: `${info.extension.borderRadius.value}px`,
          border: `${info.extension.boderWeight?.value}px ${info.extension.boderType?.value} ${info.extension.boderColor?.value}`,
        }"
      >
        {{ info.extension.suffix.value }}
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name: 'UiFlop',
    mixins: [UiMixin, ChartMixin],
    data() {
      return {
        num: [0],
        num1: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
        infoComponent: {},
        inter: null,
      }
    },
    watch: {
      info: {
        handler() {
          this.infoComponent = cloneDeep(this.info)
          this.infoComponent.extension.requestSet.value.isJson = true
          this.getRequestData()
          this.inter && (clearInterval(this.inter), (this.inter = null))
          if (this.info.extension.requestSet.value.loopRequest) {
            this.inter = setInterval(() => {
              this.getRequestData()
            }, this.info.extension.requestSet.value.loopTime)
          }
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      this.$nextTick(() => {
        this.infoComponent.extension.requestSet.value.isJson = true
        this.getRequestData()
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      console.warn('退出----------------------')
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        let obj = {}
        this.$request(this.infoComponent.extension.requestSet.value, (res) => {
          this.infoComponent.extension.requestSet.value['resList'].map((item) => {
            obj['flop'] = this.$getResponseData(res, item)
          })
          //
          if (this.info.extension.numLength?.value > 0) {
            if (String(parseInt(obj['flop'][0].value)).split('').map(Number).length == this.info.extension.numLength.value) {
              this.num = String(parseInt(obj['flop'][0].value)).split('').map(Number)
            } else if (this.info.extension.numLength.value - String(parseInt(obj['flop'][0].value)).split('').map(Number).length > 0) {
              let arr = []
              for (
                let index = 0;
                index < this.info.extension.numLength.value - String(parseInt(obj['flop'][0].value)).split('').map(Number).length;
                index++
              ) {
                arr.push(0)
              }
              this.num = arr.concat(String(parseInt(obj['flop'][0].value)).split('').map(Number))
            } else {
              this.num = String(parseInt(obj['flop'][0].value)).split('').map(Number)
            }
          } else {
            this.num = String(parseInt(obj['flop'][0].value)).split('').map(Number)
          }
        })
      },
    },
  })
</script>
<style>
  .uiFloop {
    height: var(--height);
  }
  .div2 {
    position: absolute;
    border-radius: 10px 10px 10px 10px;
    background-color: rgb(200, 200, 184);
    transition: all var(--duration);
    transform-origin: 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .atcive {
    box-shadow: 0 0 5px 2px #ededed;
  }
  .douhao {
    display: flex;
    align-items: center;
  }
  .douhao::before {
    content: ',';
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    color: var(--color);
  }
</style>
